<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter, RouterView } from 'vue-router'
import type { cssStyles, linkType } from './type'

const siderStyle: cssStyles = {
  backgroundColor: '#fff',
  height: '100%',
  borderRight: '1px solid rgba(230,230,230,0.5)'
}
const contentStyle: cssStyles = {
  height: '100%'
}

const links = ref<Array<linkType>>([
  { name: '悬浮特效', path: '/apply', id: 1 },
  { name: '蜂窝排版', path: '/apply/hexagon', id: 2 },
  { name: '进度加载', path: '/apply/loading', id: 3 },
  { name: '开关样式', path: '/apply/toggle', id: 4 },
  { name: '页面切换', path: '/apply/effect', id: 5 },
  { name: '百叶飘窗', path: '/apply/shades', id: 6 },
  { name: '按钮动画', path: '/apply/hover', id: 7 },
  { name: '文案特效', path: '/apply/light', id: 8 },
  { name: '图片裁剪', path: '/apply/crop', id: 9 },
  { name: '添加商品', path: '/apply/cart', id: 10 },
  { name: '局部查看', path: '/apply/plcheck', id: 11 },
  { name: '瀑布布局', path: '/apply/water', id: 12 },
  { name: '拖动排序', path: '/apply/dgsort', id: 13 },
  { name: '移动弹窗', path: '/apply/alert', id: 14 },
  { name: '底部导航', path: '/apply/tabbar', id: 15 },
  { name: '拖动布局', path: '/apply/dglayout', id: 16 },
  { name: '图片压缩', path: '/apply/zip', id: 17 },
  { name: '输入特效', path: '/apply/input', id: 18 },
  { name: '手机快充', path: '/apply/charge', id: 19 }
])

const route = useRoute()
const router = useRouter()
const current = ref<number>(1)
const chgCurrent = (data: linkType) => {
  current.value = data.id
  router.push(data.path)
}

watch(
  () => route.path,
  (nval) => {
    if (nval.includes('/apply/hexagon')) {
      current.value = 2
    } else if (nval.includes('/apply/loading')) {
      current.value = 3
    } else if (nval.includes('/apply/toggle')) {
      current.value = 4
    } else if (nval.includes('/apply/effect')) {
      current.value = 5
    } else if (nval.includes('/apply/shades')) {
      current.value = 6
    } else if (nval.includes('/apply/hover')) {
      current.value = 7
    } else if (nval.includes('/apply/light')) {
      current.value = 8
    } else if (nval.includes('/apply/crop')) {
      current.value = 9
    } else if (nval.includes('/apply/cart')) {
      current.value = 10
    } else if (nval.includes('/apply/plcheck')) {
      current.value = 11
    } else if (nval.includes('/apply/water')) {
      current.value = 12
    } else if (nval.includes('/apply/dgsort')) {
      current.value = 13
    } else if (nval.includes('/apply/alert')) {
      current.value = 14
    } else if (nval.includes('/apply/tabbar')) {
      current.value = 15
    } else if (nval.includes('/apply/dglayout')) {
      current.value = 16
    } else if (nval.includes('/apply/zip')) {
      current.value = 17
    } else if (nval.includes('/apply/input')) {
      current.value = 18
    } else if (nval.includes('/apply/charge')) {
      current.value = 18
    } else {
      current.value = 1
    }
  },
  {
    immediate: true
  }
)
</script>

<template>
  <div class="comp-box">
    <a-layout :style="contentStyle">
      <a-layout-sider :style="siderStyle">
        <div class="linker-wrap flex-v-ss">
          <div
            class="linker"
            :class="{ active: item.id == current }"
            v-for="(item, inx) in links"
            :key="item.id"
            @click="chgCurrent(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </a-layout-sider>
      <a-layout-content :style="contentStyle">
        <div class="linker-view">
          <router-view v-slot="{ Component }">
            <transition mode="out-in" enter-active-class="enter" leave-active-class="leave">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<style scoped lang="scss">
.comp-box {
  @include size(100%, 100%);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 50;
  .linker-wrap {
    @include size(100%, 100%);
    padding: 24px 6px;
    position: relative;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    &:hover::-webkit-scrollbar {
      display: inline-block;
    }
    .linker {
      @include size(100%, 40px);
      @include font(14px, 40px, #333);
      transition: color 0.3s;
      padding-left: 40px;
      border-radius: 4px;
      margin: 2px 0;
      cursor: pointer;
      &:hover {
        background: rgba(240, 240, 240);
      }
      &.active {
        background: rgb(230, 244, 255);
        color: rgb(22, 119, 255);
      }
    }
  }
  .linker-view {
    @include size(100%, 100%);
    position: relative;
    position: relative;
    background: #fff;
    overflow: hidden;
    background: rgba(51, 180, 255, 0.05);
  }
}

.enter {
  animation: slideDown 0.4s ease;
}
.leave {
  animation: slideUp 0.4s ease;
}

@keyframes slideDown {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes slideUp {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
}
</style>
